<script setup>
import { ref, defineOptions } from 'vue'
import { useRouter} from "vue-router"
import { user } from '@/store/storeName'


const props = defineProps({
    flag: {
        type: Boolean,
        default: false
    },
    backgroundColor: {
        type: String,
        default: "white"
    },
    name: {
        type: String,
        default: "",
    }

})

const router = useRouter()
const store  = user();

const clickHandler = () => {
    router.back()
    // window.scrollTo(0, store.ispos)
}
</script>
<template>
    <!-- 本组件是页面的头部标题，使用插槽换值 -->
    <div id="box" :style="`background-color:${backgroundColor};color:${backgroundColor === 'white' ? '' : 'white'
        }`">
        <img v-if="flag && backgroundColor === 'white'" src="@/assets/返回.png" @click="clickHandler" class="return" />
        <img v-else-if="flag" src="@/assets/返回白.png" @click="$router.back()" class="return" />
        <div class="name">{{ name }}</div>
        <div class="right">
            <slot></slot>
        </div>
    </div>
</template>

<style scoped lang='less'>
#box {
    position: sticky;
    top: 0;
    left: 0;
    background-color: white;
    width: 100%;
    // padding: 5vw 0 ;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    height: 50px;

    .return {
        position: absolute;
        left: 15px;
        top: 15px;
        //   top: 5vw;
        //   left: 5vw;
        width: 20px;
    }

    .right {
        position: absolute;
        right: 10px;
        line-height: 50px;
    }

    .name {
        // position: absolute;
        width: 100%;
        text-align: center;
        padding: 5vw 0;
        font-size: 20px;
        // left: 50%;
        // top: 0;

    }
}
</style>
